<template>
	<view class="pop-menu-panel">
		<view @longpress.stop.native="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
			<slot></slot>
		</view>
		<view v-if="isShowMenu" class="pop-menu" @tap="onClose()" @contextmenu.prevent=""></view>
		<view v-if="isShowMenu" class="menu" :style="menuStyle">
			<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
				<!-- <uni-icons class="menu-icon" :type="item.icon" :style="itemStyle(item)"></uni-icons> -->
				<text :style="itemStyle(item)"> {{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pop-menu",
		data() {
			return {
				isShowMenu: false,
				style: ""
			}
		},
		props: {
			items: {
				type: Array
			}
		},
		methods: {
			onLongPress(e) {
				if (this.isTouchMove) {
					return;
				}
				uni.getSystemInfo({
					success: (res) => {
						let touches = e.touches[0];
						let style = "";
						/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
						if (touches.clientY > (res.windowHeight / 2)) {
							style = `bottom:${res.windowHeight - touches.clientY}px;`;
						} else {
							style = `top:${touches.clientY + 20}px;`;
						}
						if (touches.clientX > (res.windowWidth / 2)) {
							style += `right:${res.windowWidth - touches.clientX}px;`;
						} else {
							style += `left:${touches.clientX}px;`;
						}
						this.menuStyle = style;
						//
						this.$nextTick(() => {
							this.isShowMenu = true;
						});
					}
				})
			},
			onTouchMove() {
				this.isTouchMove = true;
			},
			onTouchEnd() {
				this.isTouchMove = false;
			},
			onSelectMenu(item) {
				this.$emit("select", item);
				this.isShowMenu = false;
			},
			onClose() {
				this.isShowMenu = false;
			},
			itemStyle(item) {
				if (item.color) {
					return `color:${item.color};`
				}
				return `color:#fff;`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-menu-panel {
		position: relative;
		.pop-menu {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0);
			z-index: 99;
			opacity: 0.5;
		}

		.menu {
			position: fixed;
			overflow: hidden;
			background-color: #414651;
			z-index: 100;
			display: flex;
			border-radius: 8rpx;
			padding: 12px 4px;

			.menu-item:last-child {
				border: none;
			}

			.menu-item {
				font-size: 25rpx;
				display: flex;
				padding: 0 12px;
				justify-content: center;
				border-right: 1px solid #7F7F7F;
			}
		}
	}
</style>